<template>
    <div id="app">
        <keep-alive :include="keepAliveComponents">
            <router-view></router-view>
        </keep-alive>
        <pk-tab-bar></pk-tab-bar>
    </div>
</template>

<script>
    export default {
        name: 'app',
        components: {
        },
        data() {
            return {}
        },
        created() {
            //在页面加载时读取sessionStorage里的状态信息
            if (sessionStorage.getItem("store") ) {
                this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
            }

            //在页面刷新时将vuex里的信息保存到sessionStorage里
            window.addEventListener("beforeunload",()=>{
                sessionStorage.setItem("store",JSON.stringify(this.$store.state))
            })
        },
        computed: {
            keepAliveComponents(){
                return this.$store.state.keepAliveComponents
            },
            tabBar() {
                return this.$store.state.tabBar
            },
            state() {
                return this.$store.state
            }
        },
        methods: {
        }
    }

</script>

<style>
    @import url("assets/style/index.css");

    #app {
        min-height: 100vh;
        background-color: #F5F5F5;
    }
</style>
